<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>高校课程评价网站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="${ctx}/css/manage.css" />
    <link rel="stylesheet" href="${ctx}/lib/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/css/global.css" charset="utf-8" />
    <script src="${ctx}/js/hm.js"></script>
    <!-- 导入jquery插件 -->
    <script type="text/javascript" src="${ctx }/js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="${ctx}/lib/layui/layui.js"></script>
    <link id="layuicss-layer" rel="stylesheet" href="${ctx}/css/layer.css" media="all" />
    <meta charset="UTF-8">
    <script type="text/javascript">
        setTimeout(function(){document.getElementById("message").style.display="none";},5000);
    </script>
    <script>
        $(function(){
            $("#inputPic").change(function(){
                $filePath=URL.createObjectURL(this.files[0]);
                $("#preview1").attr('src',$filePath);
            })
        })
    </script>
</head>
<body>
<div class="layui-container fly-marginTop fly-user-main">
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
        <a href="javascript:;" ><img src="${sessionScope.user_session.avatar}" class="layui-nav-img" style="width:50px;height:50px;margin-left:70px;margin-top: 40px;"></a>
        <div><a href="" style="color: white;padding-left: 80px;padding-top: 10px">${sessionScope.user_session.userName} </a></div>
        <li class="layui-nav-item"> <a href="./manage?id=${sessionScope.user_session.userID}"> <i class="layui-icon"></i> 我的资料 </a> </li>
        <li class="layui-nav-item "> <a href="./password?id=${sessionScope.user_session.userID}"> <i class="layui-icon"></i> 修改密码 </a> </li>
        <li class="layui-nav-item "> <a href="./avatar?id=${sessionScope.user_session.userID}"> <i class="layui-icon"></i> 头像管理 </a> </li>
        <li class="layui-nav-item "> <a href="./login"> <i class="layui-icon"></i> 返回系统 </a> </li>
        <li class="layui-nav-item "> <a href="./exit"> <i class="layui-icon"></i> 退出系统 </a> </li>
        <span class="layui-nav-bar"></span>
    </ul>
    <div class="site-mobile-shade"></div>
    <div class="fly-panel fly-panel-user" pad20="">
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title" id="LAY_mine">
                <li class="layui-this" lay-id="info">我的头像</li>
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <div class="layui-form layui-form-pane layui-tab-item layui-show">
                    <form enctype="multipart/form-data"  method="post" action="./uploadavatar">
                        <input hidden="hidden" type="text" name="userID" value="${sessionScope.user_session.userID}">
                        <div class="layui-form-item">
                            <div class="avatar-add">
                                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                                <%--<button type="button" class="layui-btn upload-img" id="test1"> <i class="layui-icon"></i>上传头像</button>--%>
                                <input type="file" class="inputPic" id="inputPic" value="上传头像" style="margin-top: 40px;margin-left: 100px;" name="file" max="5" maxsize="5120" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
                                <img src="${sessionScope.user_session.avatar}" id="preview1"/>
                            </div>

                        </div>
                            <div class="layui-form-item">
                            <button type="submit" class="layui-btn" key="set-mine" lay-filter="*" lay-submit="">确认修改</button>
                        </div>
                        <div id="message" style="color: red;margin-left:84px;margin-top: 10px">${message}</div>
                    </form>
                </div>
                </div>
            </div>
        </div>
    <div class="footer" style="background-color:#3a3d48;height: 60px;">
        <div class="copyright" align="center"style="background-color:#3a3d48;color: white;padding-top: 20px;">Copyright ©2020 欢迎关注公众号【籁小知】！</div>
    </div>
    </div>
</div>
</body>
</html>